<template>
	<view class="competition">
		<navbar title="赛程记录" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		
		<view class="main" :style="{ top: sysHeight+'px' }">
			<view class="competition-top">
				<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/competition-top.png" mode=""></image>
			</view>
<!-- 			<view class="menu bgwhite acea-row row-middle row-around">
				<view class="item" :class="type==0?'on':''" @click="menuClick(0)">初赛</view>
				<view class="item" :class="type==1?'on':''" @click="menuClick(1)">复赛</view>
				<view class="item" :class="type==2?'on':''" @click="menuClick(2)">复活赛</view>
				<view class="item" :class="type==3?'on':''" @click="menuClick(3)">全国总决赛</view>
			</view> -->
		</view>
		
		<view style="width: 100%;height: 360rpx;"></view>
		<view class="bgwhite p30" v-if="prolist.length>0">
			<view class="melevel acea-row row-middle row-around p30" v-if="myData.length">
				<view class="fs32 themecolor bold">我</view>
				<view class="acea-row row-middle">
					<view class="avatar">
						<image class="imgwh" :src="myData.avatar" mode=""></image>
					</view>
					<view class="acea-row row-column row-between">
						<view class="acea-row row-middle">
							<view class="fs24 fc333 bold">{{ myData.title }}</view>
							<view class="tag1" v-if="myData.is_be==1">晋级</view>
							<view class="tag" v-if="myData.is_be==2">淘汰</view>
							<view class="tag" v-if="myData.is_be==0">未评审</view>
						</view>
						<!-- <view class="fs24 fc666 mt5">18554262265</view> -->
					</view>
				</view>
				<view class="fs32 themecolor bold">{{ myData.zongFen }}</view>
				<view class="fs32 themecolor bold">第{{ myData.ranking }}名</view>
			</view>
			<view class="acea-row row-middle p30">
				<view class="fc666 fs32">排名</view>
				<view class="fc666 fs32" style="margin-left: 150rpx">昵称</view>
				<view class="fc666 fs32" style="margin-left: 150rpx">分数</view>
			</view>
			<block v-for="(item,index) in prolist" :key="index">
				<view class="list acea-row row-between-wrapper">
					<view class="levelicon acea-row row-middle row-center">
						<image v-if="item.ranking==1" class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/level1.png" mode=""></image>
						<image v-if="item.ranking==2" class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/level2.png" mode=""></image>
						<image v-if="item.ranking==3" class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/level3.png" mode=""></image>
						<text class="paiming" v-if="item.ranking>3">{{ item.ranking }}</text>
					</view>
					<view class="acea-row row-between-wrapper" style="width: 400rpx;">
						<view class="acea-row row-middle">
							<view class="avatar">
								<image class="imgwh" :src="item.avatar" mode=""></image>
							</view>
							<view class="acea-row row-column row-between ml10">
								<view class="acea-row row-middle">
									<view class="fs24 fc333 bold line1" style="max-width: 80rpx;">{{ item.title }}</view>
									<view class="tag1" v-if="item.is_be==1">晋级</view>
									<view class="tag" v-if="item.is_be==2">淘汰</view>
								</view>
								<!-- <view class="fs24 fc666 mt5">18554262265</view> -->
							</view>
						</view>
						<view class="fs32 themecolor bold">{{ item.zongFen }}分</view>
					</view>
					
					<view class="see" @click.stop="open(item)">查看点评</view>
				</view>
			</block>
			<view class='loadingicon acea-row row-center-wrapper fs26'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		
		<pagenone v-if="prolist.length==0"></pagenone>
		
		<uni-popup type="center" ref="popup">
			<view class="acea-row row-middle row-center row-column">
				<view class="kuang p30">
					<view class="list acea-row row-middle">
						<view class="levelicon acea-row row-middle row-center">
							<image v-if="userdata.ranking==1" class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/level1.png" mode=""></image>
							<image v-if="userdata.ranking==2" class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/level2.png" mode=""></image>
							<image v-if="userdata.ranking==3" class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/level3.png" mode=""></image>
							<text v-if="userdata.ranking>3" class="paiming" >{{ userdata.ranking }}</text>
						</view>
						<view class="acea-row row-middle">
							<view class="avatar">
								<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
							</view>
							<view class="acea-row row-column row-between ml10">
								<view class="acea-row row-middle">
									<view class="fs24 fc333 bold">{{ userdata.title }}</view>
									<view class="tag1" v-if="userdata.is_be==1">晋级</view>
									<view class="tag" v-if="userdata.is_be==2">淘汰</view>
								</view>
								<!-- <view class="fs24 fc666 mt5">18554262265</view> -->
							</view>
						</view>
						<view class="fs32 themecolor bold" style="margin-left: 50rpx;">{{ userdata.zongFen }}分</view>
					</view>
					<view class="fc333 fs26 bold py30">评审点评记录</view>
					<view class="acea-row row-middle">
						<view class="acea-row row-column row-middle row-center dp-item" style="width: 20%;"
						v-for="(item,index) in userdata.pingShenList" :key="index">
							<view class="pingwei">
								<image class="imgwh" :src="item.avatar" mode=""></image>
							</view>
							<view class="fc666 fs28 py20">{{ item.score }}分</view>
							<view class="yuying acea-row row-middle row-center" @click.stop="audioPaly(item.mp3Url,index)">
								<view class="iconfont icon-yuyin1"></view>
								<!-- <view class="fs24 fcwhite">{{ timeTxt }}</view> -->
							</view>
							<view class="lookbtn acea-row row-middle row-center" @click.stop="pingopen(item.pingData)">查看评分</view>
						</view>
					</view>
				</view>
				<view class="iconfont icon-iconcancel0101" @click="close"></view>
			</view>
		</uni-popup> 
		
		<view class="zhebu acea-row row-middle row-center row-column" v-if="pingshow">
			<view class="pingfen-nav fs30 bold">
				<block v-for="(item,index) in pingData" :key="index">
					<view class="">{{ item.trackName }}：{{ item.score }}分</view>
				</block>
			</view>
			<view class="iconfont icon-iconcancel0101" @click="pingclose()"></view>
		</view>
		
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
		  innerAudioContext.autoplay = true;
	import{
		paihangbangList
	} from '@/api/api.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import navbar from '../../components/navbar.vue';
	import pagenone from '../../components/pagenone.vue';
	export default {
		components:{
			navbar,
			pagenone
		},
		data() {
			return {
				sysHeight: sysHeight+48,
				type:0,
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				page:1,
				limit:10,
				prolist:[],
				id:'',
				myData:[],
				userdata:[],
				timers:'0.00',
				timeTxt:'00:00',
				isCountDown: false,
				timer:null,
				palystatus: false,
				aindex:'',
				pingshow: false,
				pingData:[],
				
			};
		},
		onLoad(option){
			this.id = option.id;
			this.getlist();
		},
		methods:{
			pingopen(item){
				this.pingData = item;
				this.pingshow = !this.pingshow;
			},
			pingclose(){
				this.pingshow = !this.pingshow;
			},
			audioPaly(src,index){
				let that = this;
				if( index == that.aindex ){
					if( that.palystatus ){
						innerAudioContext.pause()
					}else{
						innerAudioContext.play();
					}
				}else{
					innerAudioContext.pause()
					setTimeout(()=>{
						innerAudioContext.play();
					},100)
				}
				innerAudioContext.src = src;
				innerAudioContext.onPlay((res)=>{
					// console.log('播放');
					that.palystatus = true;
					that.aindex = index;
				})
				innerAudioContext.onPause(()=>{
					// console.log('暂停');
					that.palystatus = false;
				})
				innerAudioContext.onCanplay(()=>{
					// timer = setInterval(()=>{
					// 	let currentTime = innerAudioContext.currentTime.toFixed(0);
					// 	let duration = innerAudioContext.duration.toFixed(0);
					// 	let text;
					// 	text = parseFloat(duration) - parseFloat(currentTime)
					// 	that.audiotext = text.toFixed(0)
					// 	console.log(that.audiotext);
					// 	if( that.aindex == index ) return;
					// 	that.aindex = index
					// },100)
				})
				innerAudioContext.onEnded(()=>{
					that.audiotext = 0
				})
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			countDown(){
				this.timer = setInterval(() => {
					this.sliderIndex = parseFloat(innerAudioContext.currentTime).toFixed(2);
					this.timeTxt = this.getTime(this.isCountDown ? innerAudioContext.duration - innerAudioContext.currentTime : innerAudioContext.currentTime);
					this.timeTxt = this.isCountDown ? '- ' + this.timeTxt : this.timeTxt;
					if (innerAudioContext.currentTime >= innerAudioContext.duration) {
						clearInterval(this.timer);
					}
				}, 100)
			},
			getTime(time) {
				let m = parseInt(time / 60 % 60)
				m = m < 10 ? '0' + m : m
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s : s
				return m + ':' + s
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				paihangbangList({ page:that.page, limit:that.limit, huodong_id:that.id }).then(res=>{
					that.myData = res.data.data.myData;
					let list = res.data.data.list;
					let prolist = that.$util.SplitArray(list, that.prolist);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'prolist', prolist);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			details(item){
				uni.navigateTo({
					url: `/pages/home/competition-detail?huodong_id=${item.huodong_id}`
				})
			},
			close(){
				this.$refs.popup.close();
			},
			open(item){
				this.$refs.popup.open();
				this.userdata = item;
			},
			menuClick(val){
				this.type = val;
			}
		},
		onReachBottom() {
			this.getlist();
		},
		onUnload() {
			innerAudioContext.pause();
			// clearInterval(timer);
		},
		onHide() {
			innerAudioContext.pause();
			// clearInterval(timer);
		},
		beforeDestroy() {
			innerAudioContext.pause();
			// clearInterval(timer);
		}
	}
</script>

<style lang="scss" scoped>
	.competition{
		
		.zhebu{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,.8);
			z-index: 9999;
			
			.pingfen-nav{
				width: 500rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				line-height: 60rpx;
				padding: 40rpx;
			}
			
			.icon-iconcancel0101{
				font-size: 70rpx;
				color: #ffffff;
			}
			
		}
		
		
		.lookbtn{
			width: 100rpx;
			height: 50rpx;
			border-radius: 10rpx;
			color: #ffffff;
			font-size: 22rpx;
			background-color: #6252DF;
			margin-top: 5rpx;
		}
		
		.tag{
			width: 80rpx;
			height: 30rpx;
			background: #FF0000;
			border-radius: 30rpx;
			color: #ffffff;
			font-size: 20rpx;
			text-align: center;
			line-height: 30rpx;
			margin-left: 5rpx;
		}
		
		.tag1{
			background: rgba(98, 82, 223, 0.3);
			width: 80rpx;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
			color: #6252DF;
			border-radius: 30rpx;
			font-size: 20rpx;
			margin-left: 5rpx;
		}
		
		.main{
			position: fixed;
			left: 0;
			right: 0;
			z-index: 88;
			
			.competition-top{
				width: 750rpx;
				height: 322rpx;
			}
			
			.menu{
				width: 100%;
				
				.item{
					line-height: 100rpx;
					font-size: 36rpx;
					color: #666666;
					
					&.on{
						border-bottom: 6rpx solid #6252DF;
						color: #6252DF;
						font-weight:  bold;
					}
				}
			}
		}
		
		.melevel{
			width: 100%;
			border-radius: 20rpx;
			background: rgba(98, 82, 223, 0.2);
			
			.avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 20rpx;
			}
			

			
		}
		
		.list{
			margin-top: 30rpx;
			
			.levelicon{
				width: 90rpx;
				height: 72rpx;
				margin: 0 10rpx;
			}
			.paiming{
				width: 72rpx;
				height: 72rpx;
				background: rgba(133, 176, 246, 0.2);
				border-radius: 50%;
				text-align: center;
				line-height: 72rpx;
				display: block;
				color: #5E92E5;
				font-size: 32rpx;
			}
			.avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-left: 20rpx;
			}
			
			.see{
				width: 132rpx;
				height: 52rpx;
				border-radius: 36rpx;
				text-align: center;
				line-height: 52rpx;
				color: #6252DF;
				background: rgba(98, 82, 223, 0.2);
				font-size: 20rpx;
				margin-left: 40rpx;
			}
			
		}

		.kuang{
			width: 750rpx;
			background-color: #ffffff;
			
			.dp-item~.dp-item{
				margin-left: 20rpx;
			}
			
			.pingwei{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.yuying{
				background: #43CB1D;
				width: 100rpx;
				height: 48rpx;
				border-radius: 12rpx;
			}
			.icon-yuyin1{
				color: #ffffff;
				font-size: 25rpx;
			}
			
		}
		.icon-iconcancel0101{
			font-size: 60rpx;
			font-weight: bold;
			color: #ffffff;
			margin: 50rpx auto;
		}

	}
</style>
